<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Switch</view>
			<view class="tui-page__desc">开关选择器，原生组件增强，支持放大缩小。</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title thorui-cells">默认使用</view>
			<tui-list-cell :hover="false" padding="24rpx 30rpx">
				<view class="thorui-flex__between">
					<text>状态：{{status?'ON':'OFF'}}</text>
					<tui-switch @change="change"></tui-switch>
				</view>
			</tui-list-cell>
			<view class="tui-title thorui-cells">默认打开</view>
			<tui-list-cell :hover="false" padding="24rpx 30rpx">
				<view class="thorui-flex__between">
					<text>checked</text>
					<tui-switch checked></tui-switch>
				</view>
			</tui-list-cell>
			<view class="tui-title thorui-cells">禁用状态</view>
			<tui-list-cell :hover="false" padding="24rpx 30rpx">
				<view class="thorui-flex__between">
					<text>disabled</text>
					<tui-switch disabled></tui-switch>
				</view>
			</tui-list-cell>
			<view class="tui-title thorui-cells">改变颜色</view>
			<tui-list-cell :hover="false" padding="24rpx 30rpx">
				<view class="thorui-flex__between">
					<text>color</text>
					<tui-switch checked color="#07c160"></tui-switch>
				</view>
			</tui-list-cell>
			<view class="tui-title thorui-cells">改变大小</view>
			<tui-list-cell :hover="false" padding="24rpx 30rpx">
				<view class="thorui-flex__between">
					<text>scaleRatio</text>
					<tui-switch :scaleRatio="0.8"></tui-switch>
				</view>
			</tui-list-cell>
			<view class="tui-title thorui-cells">type=checkbox</view>
			<tui-list-cell :hover="false">
				<view class="thorui-flex__between">
					<text>显示样式</text>
					<tui-switch type="checkbox"></tui-switch>
				</view>
			</tui-list-cell>

			<view class="tui-title thorui-cells">改变大小 | 颜色 | 整行点击</view>
			<tui-label>
				<tui-list-cell>
					<view class="thorui-flex__between">
						<text>scaleRatio | color</text>
						<tui-switch checked color="#EB0909" :scaleRatio="1.2" type="checkbox"></tui-switch>
					</view>
				</tui-list-cell>
			</tui-label>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: false
			}
		},
		methods: {
			change(e) {
				this.status = e.detail.value
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
</style>
